<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '../stores/app'

const { t } = useI18n()
const appStore = useAppStore()

const electronVersion = ref(window.elec?.versions?.electron || 'N/A')
const nodeVersion = ref(window.elec?.versions?.node || 'N/A')
const chromeVersion = ref(window.elec?.versions?.chrome || 'N/A')

function openExternal(url: string) {
  window.elec.openExternal(url)
}
</script>

<template>
  <div class="about-container">
    <h1>{{ t('about.title') }}</h1>

    <el-descriptions :title="t('about.appInfo')" :column="1" border>
      <el-descriptions-item label="App Name">Electron Vite Vue Template</el-descriptions-item>
      <el-descriptions-item :label="t('about.version')">{{ appStore.appVersion }}</el-descriptions-item>
      <el-descriptions-item :label="t('about.electronVersion')">{{ electronVersion }}</el-descriptions-item>
      <el-descriptions-item :label="t('about.nodeVersion')">{{ nodeVersion }}</el-descriptions-item>
      <el-descriptions-item :label="t('about.chromeVersion')">{{ chromeVersion }}</el-descriptions-item>
    </el-descriptions>

    <div class="buttons">
      <el-button type="primary" @click="openExternal('https://www.electronjs.org/')">
        <el-icon><Link /></el-icon>
        {{ t('about.docs.electron') }}
      </el-button>
      <el-button type="primary" @click="openExternal('https://vitejs.dev/')">
        <el-icon><Link /></el-icon>
        {{ t('about.docs.vite') }}
      </el-button>
      <el-button type="primary" @click="openExternal('https://vuejs.org/')">
        <el-icon><Link /></el-icon>
        {{ t('about.docs.vue') }}
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.about-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
}

h1 {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--el-color-primary);
}

.buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .buttons {
    flex-direction: column;
  }
}
</style>
